/**
 * 通用按钮组件
 */
import React from 'react';
import {
    TouchableOpacity,
    Text,
    StyleSheet,
    StyleProp,
    ViewStyle,
    TextStyle,
    ActivityIndicator,
    Platform
} from 'react-native';
import theme from '../../styles/theme';
import globalStyles from '../../styles/global';

/**
 * 按钮变体类型
 */
export type ButtonVariant = 'contained' | 'outlined' | 'text';

/**
 * 按钮尺寸类型
 */
export type ButtonSize = 'small' | 'medium' | 'large';

/**
 * 按钮颜色类型
 */
export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';

/**
 * 按钮组件属性接口
 */
export interface ButtonProps {
    /** 按钮标题文本 */
    title: string;
    /** 按钮点击事件处理函数 */
    onPress?: () => void;
    /** 按钮变体类型 */
    variant?: ButtonVariant;
    /** 按钮尺寸 */
    size?: ButtonSize;
    /** 按钮颜色 */
    color?: ButtonColor;
    /** 是否禁用 */
    disabled?: boolean;
    /** 是否显示加载指示器 */
    loading?: boolean;
    /** 按钮最小宽度 */
    minWidth?: number;
    /** 自定义按钮样式 */
    style?: StyleProp<ViewStyle>;
    /** 自定义文本样式 */
    textStyle?: StyleProp<TextStyle>;
    /** 左侧图标 */
    leftIcon?: React.ReactNode;
    /** 右侧图标 */
    rightIcon?: React.ReactNode;
    /** 按钮宽度是否撑满父容器 */
    fullWidth?: boolean;
    /** 是否为圆形按钮 */
    rounded?: boolean;
    /** 附加类名 */
    className?: string;
}

/**
 * 通用按钮组件
 */
const Button: React.FC<ButtonProps> = ({
    title,
    onPress,
    variant = 'contained',
    size = 'medium',
    color = 'primary',
    disabled = false,
    loading = false,
    minWidth,
    style,
    textStyle,
    leftIcon,
    rightIcon,
    fullWidth = false,
    rounded = false,
    className
}) => {
    // 构建按钮样式
    const getButtonStyle = (): StyleProp<ViewStyle> => {
        const baseStyle: StyleProp<ViewStyle> = [
            styles.button,
            styles[`${size}Button`],
            rounded && styles.roundedButton,
            fullWidth && styles.fullWidth,
            minWidth && { minWidth }
        ];

        // 变体样式
        switch (variant) {
            case 'contained':
                baseStyle.push(styles[`${color}Contained`]);
                break;
            case 'outlined':
                baseStyle.push(styles[`${color}Outlined`]);
                break;
            case 'text':
                baseStyle.push(styles[`${color}Text`]);
                break;
            default:
                baseStyle.push(styles.primaryContained);
        }

        // 禁用状态
        if (disabled) {
            baseStyle.push(styles.disabled);
        }

        return [baseStyle, style];
    };

    // 构建文本样式
    const getTextStyle = (): StyleProp<TextStyle> => {
        const baseTextStyle: StyleProp<TextStyle> = [
            styles.text,
            styles[`${size}Text`]
        ];

        // 变体文本颜色
        switch (variant) {
            case 'contained':
                baseTextStyle.push(styles[`${color}ContainedText`]);
                break;
            case 'outlined':
            case 'text':
                baseTextStyle.push(styles[`${color}Text`]);
                break;
            default:
                baseTextStyle.push(styles.primaryContainedText);
        }

        // 禁用状态
        if (disabled) {
            baseTextStyle.push(styles.disabledText);
        }

        return [baseTextStyle, textStyle];
    };

    // 构建加载指示器颜色
    const getLoaderColor = (): string => {
        if (variant === 'contained') {
            return theme.colors[color]?.contrastText || '#FFFFFF';
        }
        return theme.colors[color]?.main || theme.colors.primary.main;
    };

    return (
        <TouchableOpacity
            style={getButtonStyle()}
            onPress={onPress}
            disabled={disabled || loading}
            activeOpacity={0.7}
            accessibilityRole="button"
            accessibilityState={{ disabled: disabled || loading }}
        >
            {loading ? (
                <ActivityIndicator
                    size="small"
                    color={getLoaderColor()}
                    style={styles.loader}
                />
            ) : (
                <>
                    {leftIcon && <React.Fragment key="left-icon">{leftIcon}</React.Fragment>}
                    <Text style={getTextStyle()}>{title}</Text>
                    {rightIcon && <React.Fragment key="right-icon">{rightIcon}</React.Fragment>}
                </>
            )}
        </TouchableOpacity>
    );
};

// 组件样式
const styles = StyleSheet.create({
    button: {
        ...globalStyles.button,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: theme.borderRadius.md
    },

    // 按钮尺寸变体
    smallButton: {
        height: 32,
        paddingHorizontal: theme.spacing.sm,
        borderRadius: theme.borderRadius.sm
    },
    mediumButton: {
        height: 40,
        paddingHorizontal: theme.spacing.md
    },
    largeButton: {
        height: 48,
        paddingHorizontal: theme.spacing.lg
    },

    // 圆角按钮
    roundedButton: {
        borderRadius: 100
    },

    // 全宽按钮
    fullWidth: {
        width: '100%'
    },

    // 变体样式：Contained
    primaryContained: {
        backgroundColor: theme.colors.primary.main,
        borderWidth: 0
    },
    secondaryContained: {
        backgroundColor: theme.colors.secondary.main,
        borderWidth: 0
    },
    successContained: {
        backgroundColor: theme.colors.success.main,
        borderWidth: 0
    },
    errorContained: {
        backgroundColor: theme.colors.error.main,
        borderWidth: 0
    },
    warningContained: {
        backgroundColor: theme.colors.warning.main,
        borderWidth: 0
    },
    infoContained: {
        backgroundColor: theme.colors.info.main,
        borderWidth: 0
    },

    // 变体样式：Outlined
    primaryOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.primary.main
    },
    secondaryOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.secondary.main
    },
    successOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.success.main
    },
    errorOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.error.main
    },
    warningOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.warning.main
    },
    infoOutlined: {
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: theme.colors.info.main
    },

    // 变体样式：Text
    primaryText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    secondaryText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    successText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    errorText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    warningText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    infoText: {
        backgroundColor: 'transparent',
        borderWidth: 0
    },

    // 禁用状态
    disabled: {
        backgroundColor: theme.colors.background.disabled,
        borderColor: theme.colors.gray[300],
        opacity: 0.6
    },

    // 文本样式
    text: {
        fontFamily: theme.typography.fontFamily.base,
        fontWeight: String(theme.typography.fontWeight.medium),
        textAlign: 'center'
    },

    // 文本尺寸
    smallText: {
        fontSize: theme.typography.fontSize.xs
    },
    mediumText: {
        fontSize: theme.typography.fontSize.sm
    },
    largeText: {
        fontSize: theme.typography.fontSize.md
    },

    // 文本颜色 - Contained
    primaryContainedText: {
        color: theme.colors.primary.contrastText
    },
    secondaryContainedText: {
        color: theme.colors.secondary.contrastText
    },
    successContainedText: {
        color: theme.colors.success.contrastText
    },
    errorContainedText: {
        color: theme.colors.error.contrastText
    },
    warningContainedText: {
        color: theme.colors.warning.contrastText
    },
    infoContainedText: {
        color: theme.colors.info.contrastText
    },

    // 文本颜色 - Outlined & Text
    primaryText: {
        color: theme.colors.primary.main
    },
    secondaryText: {
        color: theme.colors.secondary.main
    },
    successText: {
        color: theme.colors.success.main
    },
    errorText: {
        color: theme.colors.error.main
    },
    warningText: {
        color: theme.colors.warning.main
    },
    infoText: {
        color: theme.colors.info.main
    },

    // 禁用文本
    disabledText: {
        color: theme.colors.text.disabled
    },

    // 加载指示器
    loader: {
        marginRight: 0
    }
});

export default Button; 